<template>
	<view class="content" style="background-color:#FFFFFF; ;">
		<view class="body" :style="{
		paddingTop:$top()+'px'
	}">
			<view class="suo">
				<view style="display: flex;
				width: 20%;
				align-items: center;">
					<text @click="show_(true,1)">{{dizhix.city?dizhix.city.name:'选择'}}</text>
					<image class="img" src="../../static/img/tb.png" />
				</view>

				<view class="input">
					<image class="img_1" src="../../static/img/su.png" />
					<input type="text" value="" placeholder="请输入搜索信息" />
				</view>
			</view>
			<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="yingxiao"></image>
		</view>
		<!-- 选项卡大的 -->
		<view class="xik">
			<view class="xik_1" @click="xuan_(item,index)" v-for="(item,index) in list">
				<text :style="{
					'font-style': xuan==index?'italic':'',
					'font-size': xuan==index?'32rpx':'28rpx',
					'font-family':'OPPOSans',
					'font-weight':  xuan==index?600:400,
					'color':xuan!=index?'#181818':'#FF1B1B'
				}">{{item.name}}</text>
				<text v-if="xuan==index"></text>
			</view>
		</view>
		<view class="xxk">
			<scroll-view scrollbars="none" :show-scrollbar='true' :scroll-x="true" class="scroll-x">
				<view class="sku_1" @click="show_(true,2,index)" :style="{
				borderRadius:sku==index?'30rpx':'30rpx',
				marginBottom: sku==index?'15rpx':'15rpx',
				height:sku==index?'60rpx':'60rpx',
				background: item.child?'rgba(255, 27, 27,0.6)':'#F4F5F7',
				}" v-for="(item,index) in sc">
					<text v-if="item.child" class="xz">{{item.child}}</text>
					<text class="wxz" v-else>{{item.name}}</text>
					<u-icon v-if="item.child" name="arrow-down-fill" color='white'  size="15" />
					<u-icon v-if="!item.child" name="arrow-down-fill"  size="15" />
				</view>
			</scroll-view>
		</view>
		<!-- 信息内容 -->
		<view class="">
			<!-- 店铺信息 -->
			<info-carp v-if="xuan!=3&&info&&info.data.length>0" :list='info.data' />
			</info-carp>
			<!-- 租房信息 -->
			<qiu-zhu img="http://puputong.huijipin.cn/uploads/20220321/6372f6c603b40c351852c72e41faa872.png"
				v-if="xuan==3&&!show" />

		</view>
		<!-- 遮罩选择 -->
		<my-pop ref="child" zhanshi="2" @change='changeform' />
		<!-- 发布遮罩 -->
		<fb-pop ref="children" />
		<u-tabbar safeAreaInsetBottom v-model="current" @change="change" :list="$list()" :mid-button="true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuan: 0,
				show: false,
				skulist: {},
				info: {},
				sku: 0,
				type: 1,
				current: '',
				form: {
					page: 1,
					area_id: '', //区域id
					bus_dis_id: '', //区域id
					industry_detail: '', //行业细分
					info_type: 2, //信息类型：1=门面出租,2=店铺转让,3=求租,4=二手设备，5=成功案例
					house_type: '', //类别
					min_space: '', //最小面积(非必填）
					max_space: '', //最大面积(非必填）
					space_sort: '', //是否根据面积排序 asc=升序，desc=降序（非必填）
					is_new: '', //是否根据最新排序
				},
				sc: [{
						name: '类别',
						child: ''
					},
					{
						name: '行业细分',
						child: ''
					},
					{
						name: '区域',
						child: ''
					},
					{
						name: '商圈',
						child: ''
					}
				],
				sku_id: [{
						name: '全部'
					},
					{
						name: '临街商铺'
					},
					{
						name: '商场市场商铺'
					},
					{
						name: '社区商铺'
					},
					{
						name: '地铁景点商铺 '
					},
					{
						name: '工业区商铺'
					},
				],
				list: [{
						name: '店铺转让',
						info_type: 2
					},
					{
						name: '门面出租',
						info_type: 1
					},
					{
						name: '二手设备',
						info_type: 4
					},
					{
						name: '求租信息',
						info_type: 3
					},

				],
				swiper: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			};
		},
		onShow() {
			this.skulist1()
			this.getinfo()
		},
		watch: {
			dizhix(a) {
				// // 区域
				// this.api('Info/area', {
				// 	city_id: a.city.id
				// }).then(res => {
				// 	this.skulist.area = res.data
				// })
				// // 商圈
				// this.api('Info/businessDistrict', {
				// 	city_id: a.city.id
				// }).then(res => {
				// 	this.skulist.businessDistrict = res.data.data
				// })
			},
		},
		computed: {
			dizhix() {
				return this.$store.state.dizhi
			}

		},
		methods: {
			// 规格选择
			changeform(a, b) {
				this.form.area_id = a.area_id
				this.form.bus_dis_id = a.bus_dis_id
				this.form.house_type = a.house_type
				this.form.industry_detail = a.industry_detail
				// this.form.info_type = a.info_type * 1 ? a.info_type * 1 : 0
				// this.list.forEach((v, index) => {
				// 	if (v.info_type == a.info_type)
				// 		this.xuan = index
				// })
				this.sc.forEach(v => {
					if (v.name == '类别') {
						v.child = b.lb ? b.lb : ''
					} else if (v.name == '行业细分') {
						v.child = b.hy ? b.hy : ''
					} else if (v.name == '区域') {
						v.child = b.qy ? b.qy : ''
					} else if (v.name == '商圈') {
						v.child = b.sq ? b.sq : ''
					}
				})
				console.log(this.sc);
				this.getinfo()
			},
			//规格数据
			skulist1() {
				const city_id = this.dizhix.city ? this.dizhix.city.id : ''
				this.api('Info/housetype').then(res => {
					this.skulist.housetype = res.data.data
				})
				this.api('Info/industryDetail').then(res => {
					this.skulist.industryDetail = res.data
				})
				if (city_id) {
					// 区域
					this.api('Info/area', {
						city_id: city_id
					}).then(res => {
						this.skulist.area = res.data
					})
					// 商圈
					this.api('Info/businessDistrict', {
						city_id: city_id
					}).then(res => {
						this.skulist.businessDistrict = res.data.data
					})
				}
			},
			getinfo() {
				this.api('Info/infoList', this.form).then(res => {
					this.info = res.data
				})
			},
			//发布按钮
			change(index) {
				if (index == 2) {
					this.$refs.children.sign(index)
				}
			},
			show_(a, b, c) {
				if (b == 2) {
					let index = c
					if (index == 2) {
						if (!this.dizhix.city) {
							uni.showToast({
								title: '请选择地址',
								icon: "none",
							});
							return
						}
					} else if (index == 3) {
						if (!this.dizhix.city) {
							this.$toast('请选择地址!')
							return
						}
					}
				}

				this.$refs.child.sign(true, b, c, this.xuan ? this.xuan : '0', this.skulist)
			},
			//选项卡大
			xuan_(item, index) {
				this.xuan = index
				this.form.info_type = this.list[index].info_type
				this.getinfo()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xxk {
		.scroll-x {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-wrap: nowrap;
			white-space: nowrap;
			padding: 10upx 20upx 0;
		}

		.sku_1 {
			display: inline-block;
			margin-right: 20rpx;
			padding: 0 20rpx 0 20rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F4F5F7;
			color: black;

			.xz {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
			color: white;
			}

			.wxz {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}
		}

	}

	::v-deep .u-tabbar__content {
		padding-bottom: env(safe-area-inset-bottom) !important;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}

	.warp {
		position: relative;
		min-height: 650rpx;
		padding-bottom: 110rpx;
		box-sizing: border-box;

		// border-radius: 20rpx;
		.bfoot {
			position: absolute;
			width: 93%;
			left: 50%;
			transform: translateX(-50%);
			bottom: 15rpx;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			overflow: hidden;

			text:nth-of-type(1) {
				width: 50%;
				display: inline-block;
				height: 80rpx;
				background: #FD9805;
				display: inline-block;
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FFFFFF;
			}

			text:nth-of-type(2) {
				width: 50%;
				display: inline-block;
				height: 80rpx;
				background: #FF1B1B;
				display: inline-block;
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.neir {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background-color: #F4F5F7;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			text {
				font-size: 26rpx;
				font-family: OPPOSans;
				font-weight: 400;
				color: #333333;
				display: block;
				height: 90rpx;
				line-height: 90rpx;
				width: 50%;
			}
		}

		.scroll-x {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-wrap: nowrap;
			white-space: nowrap;
			padding: 10upx 20upx 0;
		}

		.sku_1 {
			display: inline-block;
			margin-right: 20rpx;
			padding: 0 20rpx 0 20rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F4F5F7;
			color: #666666;

			text {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}
		}

		.sku {
			display: flex;
			width: 100%;

			.sku_1 {
				width: 180rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background: #F4F5F7;
				border-radius: 30px;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}

		}


	}

	.xik {
		display: flex;
		justify-content: space-around;

		.xik_1 {
			text-align: center;

			text:nth-of-type(1) {
				// display: block;
				// font-size: 32rpx;
				// font-family: OPPOSans;
				// font-weight: bold;
				// color: #FF1B1B;
			}

			text:nth-of-type(2) {
				display: block;
				margin: 10rpx auto;
				width: 36rpx;
				height: 10rpx;
				background: #FF1B1B;
				border-radius: 5rpx;
			}
		}

	}

	.content {
		position: relative;
		min-height: 1350rpx;
		background-color: #F4F5F7;

		.top {
			width: 100%;
			height: 440rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.body {
			min-height: 440rpx;
			padding: 30rpx 30rpx 0rpx 30rpx;
			// box-sizing: border-box;
			// border: 1px solid black;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://s4.ax1x.com/2022/03/03/bY54Hg.png);

			.yingxiao {
				width: 100%;
				height: 260rpx;
				background: #7D7D7D;
				border-radius: 16rpx;
				position: relative;
				// top: 20rpx;
			}

			.suo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.input {
					display: flex;
					align-items: center;
					padding-left: 25rpx;
					width: 570rpx;
					height: 60rpx;
					background: rgba($color:#FFFFFF, $alpha: 0.3);
					border-radius: 30px;

					.img_1 {
						width: 28rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}

					input {
						width: 100%;

						::v-deep .input-placeholder {
							font-size: 24rpx;
							font-family: OPPOSans;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}

				text {
					font-size: 28rpx;
					font-family: OPPOSans;
					font-weight: 500;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;

				}

				.img {
					width: 22rpx;
					height: 12rpx;
					margin-left: 10rpx;
				}

			}

			.body2 {
				border: 1rpx solid black;
				width: 100%;
				height: 100rpx;
			}
		}
	}
</style>
